<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layout/default">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>系统角色详情</title>
<link rel="stylesheet" th:href="@{/css/bootstrap-switch.min.css}" />
<script type="text/javascript" th:src="@{/js/bootstrap-switch.min.js}"></script>
<script>
	$(document).ready(function() {
		$('input:checkbox').bootstrapSwitch();
	});
</script>
</head>
<body>
	<div layout:fragment="content">
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-12 xol-xs-12">
				<div class="panel panel-success">
					<div class="panel-heading">
						基本信息
						<div class="btn-toolbar pull-right hidden-print">
							<div class="btn-group btn-group-xs">
								<shiro:hasPermission name="authRole:edit">
									<a class="btn btn-default"
										th:href="@{/roles/{id}/edit(id=${role.roleId})}">编辑</a>
								</shiro:hasPermission>
								<shiro:hasPermission name="authRole:delete">
									<a class="btn btn-danger" title="删除该角色"
										onclick="if(confirm('确定删除?')==false)return false;"
										th:href="@{/roles/{id}/del(id=${role.roleId})}">删除</a>
								</shiro:hasPermission>
								<a class="btn btn-default" th:href="@{/roles}">返回列表</a>
							</div>
						</div>
					</div>
					<div class="panel-body">
						<ul class="data-list" data-th-object="${role}">
							<li><label>角色名称</label> <span th:text="*{roleName}"></span></li>
							<li><label>创建时间</label> <span
								th:text="*{#dates.format(createdTime, 'yyyy-MM-dd HH:mm:ss')}"></span></li>
							<li><label>更新时间</label> <span
								th:text="*{#dates.format(updateTime, 'yyyy-MM-dd HH:mm:ss')}"></span></li>
							<li><label>角色有效</label>
								<div
									class="bootstrap-switch bootstrap-switch-mini bootstrap-switch-readonly"
									data-on-text="有效" data-off-text="禁用">
									<input type="checkbox" th:field="*{available}"
										checked="checked" readonly="readonly" />
								</div></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-lg-6 col-md-6 col-sm-12 xol-xs-12">
				<div class="panel panel-success">
					<div class="panel-heading">
						已分配权限
						<div class="btn-toolbar pull-right hidden-print">
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" data-toggle="modal"
									data-target="#modal_dialog">添加／删除权限</button>
							</div>
						</div>
					</div>
					<div class="panel-body">
						<ul class="list-group"
							th:if="${not #lists.isEmpty(myPermissions)}">
							<li class="list-group-item"
								th:each="permission: ${myPermissions}" th:object="${permission}"><label
								th:utext="*{permissionName}"></label></li>
						</ul>
						<p class="text-center text-warning"
							style="padding-top: 1rem; padding-bottom: 2rem;"
							th:if="${#lists.isEmpty(myPermissions)}">
							<small>哇喔〜〜〜，该角色尚未分配任何权限，请点击右上角 <code>添加／删除权限</code>按钮为其添加权限。
							</small>
						</p>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" role="dialog" tabIndex="-1" id="modal_dialog"
			aria-labelledby="modal_label" aria-hidden="true"
			data-backdrop="static">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="modal_label">选择系统权限</h4>
					</div>
					<div class="modal-body" id="modal_content_div"
						style="height: 360px; overflow-y: scroll">
						<ul class="list-group">
							<li class="list-group-item" th:each="permission: ${permissions}"
								th:object="${permission}"><label
								th:utext="*{permissionName}"></label>
								<div class="bootstrap-switch bootstrap-switch-mini pull-right">
									<input type="checkbox" th:value="*{permissionId}"
										th:checked="${#lists.contains(myPermissions, permission)}" />
								</div></li>
						</ul>
					</div>
					<div id="" class="modal-footer">
						<button type="button" class="btn btn-default btn-sm"
							data-dismiss="modal" title="关闭窗体，不保存操作">关闭</button>
						<button type="button" class="btn btn-success btn-sm"
							id="save_button" title="保存当前操作并关闭窗体">保存</button>
					</div>
				</div>
			</div>
		</div>

		<input type="hidden" id="save-data-url"
			th:value="@{/roles/{id}/permissions(id=${role.roleId})}" />
		<script type="text/javascript">
			$("#save_button").click(
					function() {
						var permissions = new Array();
						$("#modal_content_div .list-group li input:checkbox")
								.each(function() {
									if ($(this).prop("checked") == true) {
										permissions.push($(this).val());
									}
								});
						$.ajax({
							type : "post",
							url : $("#save-data-url").val(),
							data : JSON.stringify(permissions),
							contentType : "application/json;charset=utf-8",
							success : function(data) {
								console.log(data);
								window.location.reload();
							},
							error : function(data, s) {
								console.log("请求错误");
								console.log(data);
								console.log(s);
							}
						});
						$("#modal_dialog").modal("hide");
					});
		</script>

	</div>
</body>
</html>
